<template>
  <div id="app">
    <router-view></router-view>
    <van-tabbar
      v-model="active"
      active-color="#fe7315"
      inactive-color="#808080"
      v-if="this.$route.meta.showTab"
      route
    >
      <van-tabbar-item icon="wap-home" :to="{ name: 'Home' }"
        >首页</van-tabbar-item
      >
      <van-tabbar-item icon="label" :to="{ name: 'Fenlei' }"
        >分类</van-tabbar-item
      >
      <van-tabbar-item class="faxian" :to="{ name: 'Find' }"
        ><img
          class="fx"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171212%2Fae3a8f9cdd4e4537b257218ad905f04f.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631168247&t=7af5a2201d6aceb3c8737144659dca99"
        />
        <div>发现</div></van-tabbar-item
      >
      <van-tabbar-item icon="shopping-cart" :to="{ name: 'Cart' }"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="manager" :to="{ name: 'User' }"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      active: 0,
    };
  },
  components: {},
  methods: {
    show() {
      alert("我执行没有");
    },
  },
};
</script>

<style>
.faxian {
  text-align: center;
}
.fx {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: -30px;
}
.van-tabbar {
  z-index: 99;
}
</style>
